<template>
  <div class="particle-container" :class="themeClass">
    <div v-for="n in particleCount" :key="n" class="particle" :style="getRandomStyle()"></div>
  </div>
</template>

<script>
export default {
  name: 'ParticleBackground',
  props: {
    theme: {
      type: String,
      default: 'blue',
      validator: value => ['blue', 'purple', 'dark', 'green'].includes(value)
    },
    particleCount: {
      type: Number,
      default: 30
    }
  },
  computed: {
    themeClass() {
      return `theme-${this.theme}`;
    }
  },
  methods: {
    getRandomStyle() {
      const size = Math.floor(Math.random() * 8) + 2; // 2-10px
      const posX = Math.random() * 100;
      const posY = Math.random() * 100;
      const animDuration = (Math.random() * 25) + 15; // 15-40s
      const animDelay = Math.random() * 10;
      const opacity = Math.random() * 0.5 + 0.1; // 0.1-0.6
      
      return {
        width: `${size}px`,
        height: `${size}px`,
        left: `${posX}%`,
        top: `${posY}%`,
        animationDuration: `${animDuration}s`,
        animationDelay: `${animDelay}s`,
        opacity: opacity
      };
    }
  }
}
</script>

<style scoped>
.particle-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.3;
  animation: float-around linear infinite;
}

@keyframes float-around {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(100px, 50px) rotate(90deg);
  }
  50% {
    transform: translate(50px, 100px) rotate(180deg);
  }
  75% {
    transform: translate(-50px, 50px) rotate(270deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}

/* 深蓝主题 */
.theme-blue .particle {
  background: radial-gradient(circle at 30% 30%, #64b5f6, #1e88e5);
  box-shadow: 0 0 10px rgba(30, 136, 229, 0.3);
}

/* 紫色主题 */
.theme-purple .particle {
  background: radial-gradient(circle at 30% 30%, #ce93d8, #9c27b0);
  box-shadow: 0 0 10px rgba(156, 39, 176, 0.3);
}

/* 暗黑主题 */
.theme-dark .particle {
  background: radial-gradient(circle at 30% 30%, #455a64, #263238);
  box-shadow: 0 0 10px rgba(38, 50, 56, 0.3);
}

/* 绿色主题 */
.theme-green .particle {
  background: radial-gradient(circle at 30% 30%, #81c784, #43a047);
  box-shadow: 0 0 10px rgba(67, 160, 71, 0.3);
}
</style> 